<template>
  <div class="make-question-bank">
    <div class="header">
      <div class="btns">
        <div class="ai-btn" @click="showAiGenerateDialog()">
          <span>
            <img src="@/assets/img/ai-gif.gif" alt="AI 图标" />
            AI助手
          </span>
        </div>
        <el-button
          @click="$router.push('/aiTeaching/courseBuild/makeExcelImport')"
          >导入题目</el-button
        >
        <el-button @click="addQuestion()">添加题目</el-button>
        <el-button @click="batchDelete()">批量删除</el-button>
      </div>
    </div>

    <!-- 表格 -->
    <div class="questionBank-list">
      <el-table
        ref="table"
        :data="tableData"
        row-key="id"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column
          type="index"
          label="序号"
          width="100"
          :index="calculateIndex"
        />
        <el-table-column
          property="content"
          label="试题题目"
          width="350"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          property="questionTypeMessage"
          label="题目类型"
          width="100"
        />
        <el-table-column property="chapterName" label="章节" width="200" />
        <el-table-column
          property="kbName"
          label="知识点"
          width="350"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template #default="scope">
            <el-button
              size="small"
              text
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
              style="color: #457aff; font-size: 14px"
            >
              修改
            </el-button>
            <el-button
              style="margin-left: 0px; color: #457aff; font-size: 14px"
              text
              type="primary"
              size="small"
              @click="handlePreview(scope.$index, scope.row)"
            >
              预览
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="my_pagination"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 暂无数据 -->
    <!-- <div class="no-data" v-else>
      <img src="@/assets/img/no-data.png" alt="" />
      <div class="no-data-text">暂无内容</div>
    </div> -->

    <!-- AI生成题弹窗 -->
    <el-dialog
      class="ai-generate-dialog"
      v-model="showAiGenerate"
      width="60%"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <el-form :model="form" label-width="auto">
        <!-- <el-form-item label="选择章节：">
          <el-select
            v-model="form.chapterName"
            placeholder="请选择"
            style="width: 500px"
          >
            <el-option
              v-for="item in chapterNameList"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            />
          </el-select>
          <el-cascader
            ref="chapterName"
            v-model="form.chapterName"
            :options="chapterNameList"
            :props="cascaderProps"
            placeholder="请选择章节"
            class="chapter-section-select"
            clearable
            style="width: 500px"
          />
        </el-form-item> -->
        <el-form-item label="题目类型：">
          <el-select
            v-model="form.questionType"
            placeholder="请选择"
            style="width: 500px"
          >
            <el-option
              v-for="item in questionTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="知识点：">
          <el-tree
            ref="knowledgeTree"
            :data="treeData"
            :props="defaultProps"
            node-key="id"
            class="tree-content"
          >
            <template #default="{ data }">
              <span class="custom-tree-node">
                <!-- 只有子节点（有value值）才显示radio -->
                <el-radio
                  v-if="data.value"
                  v-model="kbId"
                  :label="data.value"
                  @change="handleKnowledgeSelect(data)"
                >
                  {{ data.label }}
                </el-radio>
                <!-- 父节点只显示文本 -->
                <span v-else>{{ data.label }}</span>
              </span>
            </template>
          </el-tree>
        </el-form-item>
        <!-- <el-form-item label="题目类型：">
          <el-select v-model="form.questionType" placeholder="请选择" style="width: 500px;">
            <el-option v-for="item in questionTypeList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item> -->
        <div class="questionTypeList">
          <el-form-item label="题目数量：">
            <el-input-number v-model="form.questionNum" :min="1" />
          </el-form-item>
          <!-- <el-form-item label="选择题：">
            <el-input-number v-model="form.choiceQuestion" :min="1" />
          </el-form-item>
          <el-form-item label="判断题：">
            <el-input-number v-model="form.trueOrFalsequestion" :min="1" />
          </el-form-item>
          <el-form-item label="简答题：">
            <el-input-number v-model="form.AnswerQuestion" :min="1" />
          </el-form-item>
          <el-form-item label="分析题：">
            <el-input-number v-model="form.analysisQuestion" :min="1" />
          </el-form-item> -->
        </div>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button color="#155EEF" @click="generateQuestion()">
            保存
          </el-button>
          <el-button @click="showAiGenerate = false">取消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 题库弹窗 -->
    <el-dialog
      class="question-bank-dialog"
      v-model="showQuestionBank"
      width="60%"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <div
        class="markdown-content"
        v-loading="dialogLoading"
        element-loading-text="AI正在生成题目..."
      >
        <MdEditor
          class="markdown"
          ref="mdEditor"
          v-model="markdownContent"
          :toolbars="[]"
          :footers="[]"
        />
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button color="#155EEF" @click="saveQuestion()">
            保存试题
          </el-button>
          <el-button color="#155EEF" @click="resetQuestion()"
            >重新生成</el-button
          >
        </div>
      </template>
    </el-dialog>

    <!-- 导入题目弹窗 -->
    <el-dialog
      class="import-question-dialog"
      v-model="showImportQuestion"
      width="30%"
      :close-on-click-modal="false"
      :before-close="handleClose"
      center
    >
      <el-radio-group v-model="radio" @change="handleRadioChange">
        <!-- <el-radio label="题库中导入" value="1"></el-radio> -->
        <el-radio label="Excel导入" value="2"></el-radio>
      </el-radio-group>
      <template #footer>
        <div class="dialog-footer">
          <el-button color="#155EEF" @click="confirmFn()"> 确定 </el-button>
          <el-button plain @click="showImportQuestion = false">
            取消
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 预览弹窗-->
    <el-dialog
      :close-on-click-modal="false"
      width="850"
      class="dialog-questions"
      v-model="dialogQuestion"
      center
    >
      <div class="dialog-content markdown-body">
        <div class="question-title">
          <div class="question-choosetype">{{ chooseType }}</div>
          <span v-html="rowData.content"></span>
        </div>
        <template v-if="rowData.questionType === 1">
          <div
            v-for="(item, index) in rowData.answer"
            :key="index"
            class="question-chose"
          >
            <span>{{ answerChose[index] }}：</span>
            <span class="question-flex" v-html="item.content"></span>
          </div>
        </template>
        <div class="question-answer">
          答案：
          <span
            v-if="rowData.questionType === 3"
            class="chose"
            style="font-family: '黑体'; font-size: 16px"
            v-html="answerTrue"
          ></span>
          <span v-else class="chose" v-html="answerTrue"></span>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            type="primary"
            color="#155EEF"
            @click="dialogQuestion = false"
            >确 定</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      courseId: "",
      chapterId: "",
      questionType: "",
      chooseType: "",
      currentPage: 1,
      pageSize: 10,
      total: 0,
      radio: "2",
      selectImportType: "1",
      selectIds: [],
      tableData: [],
      defaultProps: {
        children: "children",
        label: "label",
        value: "id",
      },
      chapterNameList: [],
      treeData: [],
      questionTypeList: [
        { id: 1, name: "选择题" },
        { id: 2, name: "判断题" },
        { id: 3, name: "填空题" },
        { id: 4, name: "简答题" },
        { id: 9, name: "分析题" },
      ],
      showAiGenerate: false,
      showQuestionBank: false,
      showImportQuestion: false,
      form: {
        chapterName: [],
        chapterId: "",
        questionType: "",
        questionNum: 1,
        kbName: "",
      },
      cascaderProps: {
        value: "value",
        label: "label",
        children: "children",
      },
      markdownContent: "",
      dialogQuestion: false,
      rowData: {},
      answerChose: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"],
      answerTrue: "",
      eventSource: null,
      isFirst: true,
      loadingAI: null,
      dialogLoading: false,
      isSending: false,
      selectNodes: "",
      kbId: "",
    };
  },
  created() {
    this.courseId = JSON.parse(localStorage.getItem("courseId"));
    this.getQuestionBankList();
    this.getTreeData();
    this.getChapterList();
  },
  methods: {
    // 计算表格序号
    calculateIndex(index) {
      return (this.currentPage - 1) * this.pageSize + index + 1;
    },

    // 获取题库列表
    getQuestionBankList() {
      this.$axios
        .get(
          `/tes/course/${this.courseId}/businessType/1/question-repository/questionOwner?pageNum=${this.currentPage}&pageSize=${this.pageSize}&chapterId=${this.chapterId}&questionType=${this.questionType}`
        )
        .then((res) => {
          this.tableData =
            res.data?.content.map((item) => ({
              ...item,
              content: this.delHTMLLabel(item.content).replace(
                /\(\+\)/g,
                "（）"
              ),
            })) || [];
          this.total = res.data?.total || 0;
        });
    },

    // 删除html标签
    delHTMLLabel(str) {
      let reg = /<[^>]*>|<\/[^>]*>/gm;
      let result = str.replace(reg, "");
      return result;
    },

    // 获取章节列表
    getChapterList() {
      this.$axios
        .get(`/tes/course/auto/make/all-chapter?courseId=${this.courseId}`)
        .then((res) => {
          this.chapterNameList = res.data;
        });
    },

    // 获取知识点树
    getTreeData() {
      this.$axios
        .get(`/tes/course/auto/make/chapter-kb?courseId=${this.courseId}`)
        .then((res) => {
          this.treeData = res.data;
        });
    },
    handleKnowledgeSelect(data) {
      this.kbId = data.value;
      this.form.kbName = data.label;
      this.form.chapterId = data.parentId;
    },
    handleSelectionChange(val) {
      this.selectIds = val.map((item) => item.id);
    },
    handleRadioChange(val) {
      this.selectImportType = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getQuestionBankList();
    },
    handleEdit(index, row) {
      switch (row.questionType) {
        case 1:
          this.$router.push({
            path: "/aiTeaching/courseBuild/makeAddChoiceQuestion",
            query: {
              rowId: row.id,
              kbId: row.kbId,
              chapterId: row.chapterId,
            },
          });
          break;
        case 2:
          this.$router.push({
            path: "/aiTeaching/courseBuild/makeAddJudgeQuestion",
            query: {
              rowId: row.id,
              kbId: row.kbId,
              chapterId: row.chapterId,
            },
          });
          break;
        case 3:
          this.$router.push({
            path: "/aiTeaching/courseBuild/makeAddFillBlankQuestion",
            query: {
              rowId: row.id,
              kbId: row.kbId,
              chapterId: row.chapterId,
            },
          });
          break;
        case 4:
          this.$router.push({
            path: "/aiTeaching/courseBuild/makeAddShortAnswerQuestion",
            query: {
              rowId: row.id,
              kbId: row.kbId,
              chapterId: row.chapterId,
            },
          });
          break;
        case 9:
          this.$router.push({
            path: "/aiTeaching/courseBuild/makeAddAnalysisQuestion",
            query: {
              rowId: row.id,
              kbId: row.kbId,
              chapterId: row.chapterId,
            },
          });
          break;

        default:
      }
    },
    handlePreview(index, row) {
      this.dialogQuestion = true;
      this.rowData = row;
      this.chooseType =
        row.questionType === 1
          ? row.answer &&
            row.answer.filter((item) => item.isCorrect).length === 1
            ? "[单选题]"
            : "[多选题]"
          : row.questionType === 2
          ? "[判断题]"
          : row.questionType === 3
          ? "[填空题]"
          : row.questionType === 4
          ? "[简答题]"
          : row.questionType === 9
          ? "[分析题]"
          : "";
      let answer = row.answer;
      this.answerTrue = "";
      //选择题
      if (row.questionType === 1) {
        //遍历找出正确答案选项
        answer.forEach((item, index) => {
          if (item.isCorrect) {
            this.answerTrue += this.answerChose[index];
          }
        });
      }
      //判断题
      if (row.questionType === 2) {
        if (answer[0].isCorrect) {
          this.answerTrue = "正确";
        } else {
          this.answerTrue = "错误";
        }
      }
      //填空题,简答，实验
      if (
        row.questionType === 3 ||
        row.questionType === 4 ||
        row.questionType === 9
      ) {
        this.answerTrue = answer[0].content;
      }
    },
    handleClose() {
      // 如果存在EventSource连接，先关闭它
      if (this.eventSource) {
        this.eventSource.close();
        this.eventSource = null;
      }

      // 重置相关状态
      this.isSending = false;
      this.isFirst = true;
      this.dialogLoading = false;

      // 关闭loading
      if (this.loadingAI) {
        this.loadingAI.close();
      }

      // 关闭弹窗
      this.showAiGenerate = false;
      this.showQuestionBank = false;
      this.showImportQuestion = false;
    },

    // 打开AI生成题弹窗
    showAiGenerateDialog() {
      this.form = {
        chapterName: "",
        questionType: "",
        questionNum: 1,
      };
      this.kbId = "";
      this.$nextTick(() => {
        if (this.$refs.tree) {
          this.$refs.tree.setCheckedKeys([]);
        }
      });
      this.showAiGenerate = true;
    },

    // 生成题库
    generateQuestion() {
      if (this.isSending) {
        this.$message.error("请等待回答结束");
        return;
      }

      // 重置isFirst状态
      this.isFirst = true;

      if (!this.kbId) {
        this.$message.error("请选择知识点");
        return;
      }
      if (this.form.questionType === "") {
        this.$message.error("请选择题目类型");
        return;
      }

      this.loadingAI = this.$loading({
        lock: true,
        text: "加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.showAiGenerate = false;
      this.showQuestionBank = true;
      //清空旧消息
      this.markdownContent = "";
      //显示弹窗loading
      this.dialogLoading = true;
      //立即锁定按钮
      this.isSending = true;
      // 只有当eventSource不存在时才创建新的EventSource连接
      if (!this.eventSource) {
        // 创建新的EventSource连接
        this.eventSource = new EventSource("/tes/graph/sse/connect");

        // 设置消息接收的回调函数
        this.eventSource.onmessage = (event) => {
          let data = event.data;
          if (data === "↖Start↘") {
            this.loadingAI.close();
            this.dialogLoading = false; // 隐藏弹窗loading
          }
          if (data === "↖Done↘") {
            this.closeSend();
            return;
          }
          if (data.includes("↖Error↘")) {
            data = data.replaceAll("↖Error↘", "");
            this.$message.error(data);
            this.closeSend();
            this.loadingAI.close();
            this.dialogLoading = false; // 隐藏弹窗loading
            return;
          }
          if (this.isFirst) {
            //首次接收的是id，不添加
            this.sendContent(data);
            this.isFirst = false;
          } else {
            data = data.replaceAll("↖Start↘", "");
            data = data.replaceAll("↖emsp↘", " ");
            data = data.replaceAll("↖br↘", "\n");
            data = data.replaceAll("↖tab↘", "   ");
            this.markdownContent += data;
          }
        };

        // 可选：监听错误事件，以便在出现问题时能够重新连接或处理错误
        this.eventSource.onerror = (event) => {
          console.log(event, "error");
          // 关闭出错的连接
          this.eventSource.close();
          // 重置eventSource变量，允许重建连接
          this.eventSource = null;
          // 解锁按钮
          this.isSending = false;
        };
      }
    },
    sendContent(id) {
      const data = {
        connectId: id,
        chapter: this.form.kbName,
        name: localStorage.getItem("courseName"),
        num: this.form.questionNum,
        type: this.form.questionType,
      };
      this.$axios
        .post("/tes/ai-assistant/send/3", data)
        .then((res) => {})
        .finally(() => {
          this.isSending = false;
          this.loadingAI.close();
        });
    },

    closeSend() {
      this.isSending = false;
      this.dialogLoading = false;
      this.loadingAI.close();
      this.eventSource.close();
      this.eventSource = null;
    },

    // 保存题库
    saveQuestion() {
      if (this.isSending) {
        this.$message.error("请等待回答结束");
        return;
      }
      let questionType = "";
      if (this.form.questionType == "选择题") {
        questionType = 1;
      } else if (this.form.questionType == "判断题") {
        questionType = 2;
      } else if (this.form.questionType == "填空题") {
        questionType = 3;
      } else if (this.form.questionType == "简答题") {
        questionType = 4;
      } else if (this.form.questionType == "分析题") {
        questionType = 9;
      }
      const data = {
        chapterId: this.form.chapterId,
        content: this.markdownContent,
        questionType: questionType,
        kbId: this.kbId,
      };
      this.$axios
        .post(
          `/tes/course/${this.courseId}/businessType/1/question-repository/ai-question`,
          data
        )
        .then((res) => {
          this.$message.success("保存成功");
          this.getQuestionBankList();
          this.showQuestionBank = false;
        });
    },

    // 重新生成
    resetQuestion() {
      if (this.isSending) {
        this.$message.error("请等待回答结束");
        return;
      }

      // 关闭现有的EventSource连接
      if (this.eventSource) {
        this.eventSource.close();
        this.eventSource = null;
      }

      // 重置状态
      this.isFirst = true;
      this.markdownContent = "";
      this.dialogLoading = true;
      this.isSending = true;

      // 创建loading
      this.loadingAI = this.$loading({
        lock: true,
        text: "重新生成中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      // 重新创建EventSource连接
      this.eventSource = new EventSource("/tes/graph/sse/connect");

      // 设置消息接收的回调函数
      this.eventSource.onmessage = (event) => {
        let data = event.data;
        if (data === "↖Start↘") {
          this.loadingAI.close();
          this.dialogLoading = false;
        }
        if (data === "↖Done↘") {
          this.closeSend();
          return;
        }
        if (data.includes("↖Error↘")) {
          data = data.replaceAll("↖Error↘", "");
          this.$message.error(data);
          this.closeSend();
          this.loadingAI.close();
          this.dialogLoading = false;
          return;
        }
        if (this.isFirst) {
          //首次接收的是id，不添加
          this.sendContent(data);
          this.isFirst = false;
        } else {
          data = data.replaceAll("↖Start↘", "");
          data = data.replaceAll("↖emsp↘", " ");
          data = data.replaceAll("↖br↘", "\n");
          data = data.replaceAll("↖tab↘", "   ");
          this.markdownContent += data;
        }
      };

      // 监听错误事件
      this.eventSource.onerror = (event) => {
        console.log(event, "error");
        this.eventSource.close();
        this.eventSource = null;
        this.isSending = false;
        this.dialogLoading = false;
      };
    },

    // 确定导入类型
    confirmFn() {
      // if (this.selectImportType === "1") {
      //   this.$router.push({
      //     path: "/aiTeaching/courseBuild/makeImportQuestionBank",
      //   });
      // } else {
      this.$router.push({
        path: "/aiTeaching/courseBuild/makeExcelImport",
      });
      // }
    },

    // 添加题目
    addQuestion() {
      this.$router.push({
        path: "/aiTeaching/courseBuild/makeAddChoiceQuestion",
        query: {},
      });
    },

    // 批量删除
    batchDelete() {
      if (this.selectIds.length === 0) {
        this.$message.warning("请选择要删除的题目");
        return;
      }
      this.$confirm("确定删除所选题目吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios
          .delete(
            `/tes/course/${this.courseId}/businessType/1/question-repository/question`,
            {
              data: this.selectIds,
            }
          )
          .then((res) => {
            this.$message.success("删除成功");
            this.getQuestionBankList();
            // 如果当前页没有数据了，回到上一页
            const maxPage = Math.ceil(this.total / this.pageSize);
            if (this.currentPage > maxPage && maxPage > 0) {
              this.currentPage = maxPage;
            }
          });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.make-question-bank {
  background-color: #fff;
  padding: 40px 50px 40px 70px;
  box-sizing: border-box;
  min-height: 650px;

  .header {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .btns {
      display: flex;
      align-items: center;
      gap: 10px;

      .ai-btn {
        display: flex;
        align-items: center;

        span {
          position: relative;
          width: 85px;
          height: 25px;
          border-radius: 16px;
          background-color: #5297fb;
          font-size: 14px;
          color: #fff;
          text-align: right;
          line-height: 25px;
          padding-right: 15px;
          box-sizing: border-box;
          cursor: pointer;

          img {
            position: absolute;
            left: -15px;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 45px;
          }

          &:hover {
            img {
              transform: translateY(-50%) rotate(360deg);
              transition: all 0.5s;
            }
          }
        }
      }

      .el-button {
        margin-left: 0;
        background: #457aff;
        border-radius: 4px;
        color: #fff;
      }
    }
  }

  .questionBank-list {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;

    :deep(.el-popper.is-dark) {
      max-width: 30%;
      line-height: 22px;
    }
    :deep(.el-table__row) {
      .cell {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .my_pagination {
      :deep(.el-pager li.is-active) {
        color: #457aff;
      }

      :deep(.el-pager li:hover) {
        color: #457aff;
      }
    }
  }
  .no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 220px 0;
    gap: 10px;
    width: 100%;
    background-color: #fff;
    .no-data-text {
      font-size: 16px;
      color: #999;
    }
  }
}
</style>

<style lang="scss">
.ai-generate-dialog {
  .questionTypeList {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
  }
  .tree-content {
    width: 100%;
    max-height: 323px;
    overflow-y: auto;
    border: 1px solid #e5e5e5;
    padding: 10px;
    box-sizing: border-box;
    &::-webkit-scrollbar {
      display: none;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #e5e5e5;
    }
    &::-webkit-scrollbar-track {
      background-color: #f5f5f5;
    }
  }
  .el-dialog {
    height: 680px !important;
  }

  .el-dialog__body {
    padding: 50px !important;
  }

  .el-textarea__inner {
    height: 323px !important;
    min-height: 323px !important;
  }
}

.question-bank-dialog {
  .el-dialog__header {
    padding-top: 10px;
  }

  .markdown-content {
    .markdown {
      .md-editor-resize-operate {
        width: 0;
      }

      .md-editor-input-wrapper {
        display: none;
        width: 0;
      }
      .md-editor-content-wrapper {
        width: 100% !important;
      }
      .md-editor-content {
        display: block;
        height: 100%;
        overflow-y: auto;
      }
    }
  }
}

.import-question-dialog {
  .el-dialog__body {
    padding: 50px 0;
  }

  .el-radio-group {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

<style lang="scss">
.question-tooltip {
  max-width: 300px;
  height: auto;
  word-wrap: break-word;
}
.dialog-questions {
  .el-dialog__body {
    max-height: 500px;
    overflow: auto;
  }
  .dialog-content {
    padding: 20px 64px 0;
    .question-title {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-weight: bold;
      font-size: 16px;
      margin-bottom: 20px;
      .question-choosetype {
        flex-shrink: 0;
        font-weight: normal;
        color: #457aff;
      }
    }
    .question-chose {
      font-size: 14px;
      line-height: 24px;
      padding: 6px 0;
      display: flex;
      align-items: center;
      .question-flex {
        flex: 1;
      }
      p {
        line-height: 24px;
      }
    }
    .question-answer {
      font-size: 16px;
      .chose {
        font-size: 18px;
        line-height: 30px;
        color: #385899;
        vertical-align: -2px;
        p {
          line-height: 30px;
        }
      }
      margin-top: 20px;
    }
  }
  .el-dialog__footer {
    text-align: center;
  }
}
</style>
